<template>
    <div class="invitation-code-page">
       <div>
           <el-form>
                <el-form-item label="商户号：">
                    <el-input placeholder="请输入商户号" v-model="searchForm.phone" size="small" clearable></el-input>
               </el-form-item>
               <el-form-item label="推广员：">
                    <el-input placeholder="请输入推广员" v-model="searchForm.promoterPhone" size="small" clearable></el-input>
               </el-form-item>
                <el-form-item label="店铺名称：">
                    <el-input placeholder="请输入店铺名称" v-model="searchForm.name" size="small" clearable></el-input>
               </el-form-item>
               <el-form-item label="店铺类型：">
                   <el-select v-model="searchForm.shopType" placeholder="请选择类型" size="small">
                        <el-option  label="全部" value=""></el-option>
                        <el-option v-for="(item, index) in platformTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
                   </el-select>
               </el-form-item>

                <el-form-item label="任务开始时间 ：">
                <div class="block">
                  <el-date-picker size="small" v-model="searchTime" type="datetimerange" @change="changeTime" :default-time="['00:00:00', '23:59:59']" range-separator="至" start-placeholder="开始日期"
                   end-placeholder="结束日期"></el-date-picker>
                </div>
              </el-form-item>
               <el-form-item>
                   <el-button class="search-btn" @click="searchData()">查&nbsp;&nbsp;询</el-button>
               </el-form-item>

           </el-form>
       </div>
       <div>
          <!-- <div class="all-text">
            <span>累计任务总数:{{allAllNum}}</span>
            <span>累计执行成功:{{allSuccessNum}}</span>
            <span>累计执行失败:{{allFailNum}}</span>
            <span>累计进行中:{{allWaitNum}}</span>
            <span>累计佣金收入:{{shopAllCommission}}</span>
          </div> -->
           <el-table :data="tableData" border show-summary  :summary-method="getSummaries">
               <el-table-column prop="phone" label="商户账号"></el-table-column>
               <el-table-column prop="promoter_phone" label="推广员"></el-table-column>
               <el-table-column prop="type_name" label="店铺类型"></el-table-column>
               <el-table-column prop="name" label="店铺名称"></el-table-column>
               <el-table-column prop="all_num" label="任务总数"></el-table-column>
               <!-- <el-table-column prop="wait_num" label="等待执行"></el-table-column> -->
               <!-- <el-table-column prop="wait_get_num" label="等待操作"></el-table-column> -->
               <!-- <el-table-column prop="real_num"  label="正在操作"></el-table-column> -->
               <el-table-column prop="success_num" label="执行成功"></el-table-column>
               <el-table-column prop="fail_num" label="执行失败"></el-table-column>
               <el-table-column prop="wait_num" label="进行中"></el-table-column>
               <!-- <el-table-column prop="merchant_fail_num"  label="商家终止"></el-table-column> -->
                <el-table-column prop="shop_commission" label="佣金收入"></el-table-column>
           </el-table>
           <div class="export-box">
             <el-button class="export-btn" @click="exportExcel">导出</el-button>
           </div>
            <div class="block" style="margin: 20px 0px; text-align: right;">
            	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
            	 :page-sizes="[10, 15, 20, 25, 50]" :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
            </div>
       </div>
    </div>

</template>
<script>
import {apiPromoterShopList} from '../../request/api'
    export default {
        data(){
            return {
                tableData:[],
                searchForm: {
                    token: window.sessionStorage.getItem("token"),
                    phone: '',
                    shopType: '',
                    name: '',
                    beginTime: '',
                    promoterPhone: '',
                    page:1,
                    pageSize: 10
                },
                storeType: [
                {
                    label: '淘宝',
                    value: 1
                },
                {
                    label: '天猫',
                    value: 2
                },
                {
                    label: '京东',
                    value: 3
                },
				{
				    label: '1688',
				    value: 4
				},
                {
                    label: '唯品会',
                    value: 13
                },
                {
                    label: '拼多多',
                    value: 15
                }
                ],
                searchTime: [],
                shopAllCommission: 0,
                allSuccessNum: 0,
                allFailNum: 0,
                allAllNum: 0,
                allWaitNum: 0,
                salemanList: [],
                pageTotal:0,
                platformTypeList: [],
                shopTypeList: window.sessionStorage.getItem("shopTypeList"),
            }
        },
        created () {
            this.writeCurrentDate()
            this.getTableData()
            if(!this.shopTypeList || this.shopTypeList == null){
              this.platformTypeList = this.storeType
            } else {
              let shopShowTypeArr = this.shopTypeList.split(',')
              for(var i in this.storeType){
                if(shopShowTypeArr.indexOf(this.storeType[i].value.toString()) >=0) {
                  this.platformTypeList.push(this.storeType[i])
                }
              }
            }
        },
        methods:{
          getSummaries(param) {
              const { columns, data } = param;
              const sums = [];
              columns.forEach((column, index) => {
              if (index === 0) {
                  sums[index] = '总计';
                  return;
              }
               if (index ===1) {
                  sums[index] = '';
                  return;
              }
              if (index ===2) {
                  sums[index] = '';
                  return;
              }
              if (index ===3) {
                  sums[index] = '';
                  return;
              }
              if (index ===4) {
                  sums[index] = '';
                  return;
              }
              const values = data.map(item => Number(item[column.property]));
              if (!values.every(value => isNaN(value))) {
                  sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                     return prev + curr;
                  } else {
                      return prev;
                  }
                  }, 0);
                  if(index==8){
                    parseFloat(sums[index]).toFixed(2)
                  } else {
                    sums[index]
                  }
              } else {
                  sums[index] = '';
              }
              });

              return sums;
          },
          handleSizeChange(val){
              this.searchForm.pageSize = val;
              this.getTableData()
          },
          handleCurrentChange(val){
              this.searchForm.page = val;
              this.getTableData()
          },
            getTableData (){
              this.$showLoading()
                apiPromoterShopList(this.searchForm).then(res =>{
                    this.tableData = res.data
                    this.pageTotal = res.count
                    this.shopAllCommission = res.shopAllCommission
                    this.allSuccessNum = res.allSuccessNum
                    this.allFailNum = res.allFailNum
                    this.allAllNum = res.allAllNum
                    this.allWaitNum = res.allWaitNum
                    this.$hideLoading()
                }).catch(res => {
                    this.$hideLoading()
                    this.$message.error('数据加载失败')
                })
            },
            writeCurrentDate() {
              var now = new Date();
              var startTime = new Date(new Date().toLocaleDateString()).getTime() 
              var endTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 -1)
               this.searchTime = [startTime,endTime]
              this.searchForm.beginTime = this.changeTimestamp(startTime) + ' - ' + this.changeTimestamp(startTime)
              // this.form.startTime = Math.floor(startTime / 1000)
              // this.form.endTime =  Math.floor(endTime / 1000)
            },
            searchData(){
                this.getTableData()
            },
            changeTime(val){
                 if (this.searchTime == null) {
                     this.searchForm.beginTime = ''
                } else{
                  const startTimestamp = new Date(val[0]).getTime();
                  const endTimestamp = new Date(val[1]).getTime();
                  if ((endTimestamp - startTimestamp) > 24 * 60 * 60 * 1000) {
                     this.$message.warning('查询范围不能超过一天');
                     this.writeCurrentDate()
                     return;
                  }
                  this.searchForm.beginTime =  this.changeTimestamp(val[0]) + ' - ' +  this.changeTimestamp(val[1])

                }
            },
            changeTimestamp(time){
                var d = new Date(time);
                var s = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
                return s
            },
            exportExcel(val){
              this.$showLoading()
              let uid = window.sessionStorage.getItem("uid")
              let downloadUrl = this.BASE_API_URL + 'baseapi/promoterBase/countDataExport'
              let downloadParam = '?uid=' + uid + '&phone=' + this.searchForm.phone + '&shopType=' + this.searchForm.shopType + '&name=' + this.searchForm.name
               + '&beginTime=' + this.searchForm.beginTime  + '&promoterPhone=' + this.searchForm.promoterPhone
              window.location.href = downloadUrl + downloadParam
              setTimeout(()=>{
                 this.$hideLoading()
                 this.$message.warning('请耐心等待表格下载')
              },10000)
            }
        }
    }
</script>
<style lang="less" scoped>
@import '../../assets/css/common.css';
.all-text {
  text-align: right;
  color: red;
  span {
    width: 12%;
    display: inline-block;
    text-align: center;
  }
}
.export-box {
  display: inline-block;
  float: left;
  margin-top: 20px;
  .export-btn {
    padding: 8px 15px;
    color: #FFFFFF;
    background: #0e7cee;

  }
}
</style>
